<template>
  <div class="home">
    <!-- 头部 -->
    <Header/>
    <!-- <Header>Header</Header>  -->
    <el-container class="content">
      <!-- 左侧菜单栏 -->
        <Menu />
        <!-- 内容 -->
      <el-container>
        <el-main>
          <!-- 面包屑 -->
          <Bread />
          <div class="cont">
            <router-view></router-view>
          </div>     
        </el-main>
        <!-- 底部 -->
        <el-footer><Footer /></el-footer>
      </el-container>
    </el-container>
  </div>
</template>
 
<script>
import Bread from './common/Breadcrumb'
import Header from './common/Header'
import Footer from './common/Footer'
import Menu from './common/Menu.vue'
export default {
  name: 'HelloWorld',
  components:{ //注册
    Header,
    Footer,
    Menu,
    Bread
  },
  data(){
    return {}
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .home{
    width:100%;
    height:100%;
  }
  .content{
    position: absolute;
    width: 100%;
    top:68px;
    bottom: 0;
  }
  .count{
    margin:20px 0;
  }
  .el-main{
    padding: 5px;
  }
</style>